<script>
export default {
  props:{
    title:{
      type:String,
      default(){
        return ' 默认标题 '
      }
    },
    defaultTime:{
      type: Date,
      default(){
        return new Date()
      }
    }
  },
  methods:{
    formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}.${month}.${day} ${hours}:${minutes}`;
}

}
}
</script>

<template>
<div class="border-main-box shape">
  <div class="report-mask"></div>
  <div class="top-line"></div>
  <div class="bottom-line"></div>
  <div class="left-line"></div>
  <div class="right-line"></div>
  <img class="horn-left-top" src = "./images/horn.svg" alt = "horn-left-top">
  <img class="horn-right-top" src = "./images/horn.svg" alt = "horn-right-top">
  <img class="horn-left-bottom" src = "./images/horn.svg" alt = "horn-left-bottom">
  <img class="horn-right-bottom" src = "./images/horn.svg" alt = "horn-right-bottom">
  <div class="border-main-box-content">
     <div class="topReport">
       <div class="title-app"><img src = "./images/tag-icon.svg" alt = "tag-icon">{{ title }}</div>
       <div class="update-time">更新时间：{{ formatDate(defaultTime) }}</div>

     </div>
    <slot></slot>

    </div>
</div>
</template>

<style scoped lang = "scss">

.border-main-box:after{
  content: ' ';
  width: calc(100% - 12px);
  height: calc(100% + 10px);
  background: linear-gradient(180deg, rgba(1, 104, 180, 0.15) 1%, rgba(81, 145, 225, 0.15) 99%);
  background-size: 100% 120%;
  position: absolute;
  top: -5px;
  left: 5px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}
.border-main-box{
  position: relative;
  width: 100%;
  min-height: 280px;


  //box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
  > img{
    width: 40px;
    height: auto;
  }
  > .horn-left-bottom{
    transform: rotate(180deg);
    position: absolute;
    bottom: -5px;
    left: 5px;
  }
  > .horn-right-bottom{
    transform: rotate(90deg);
    position: absolute;
    bottom: -2px;
    right: 4px;
  }

  > .horn-left-top{
    transform: rotate(270deg);
    position: absolute;
    top: -1px;
    left: 1.7px;
  }
  $report-line-color: rgb(95,158,237);
  > .left-line{
    content: ' ';
    display: block;
    background-color: $report-line-color;
    width: 0.8px;
    height: calc(100% - 66px);
    position: absolute;
    top: 36px;
    left: 5px;
  }
  > .right-line{
    content: ' ';
    display: block;
    background-color: $report-line-color;
    width: 0.8px;
    height: calc(100% - 64px);
    position: absolute;
    top: 29px;
    right: 7px;
  }
  > .top-line{
    content: ' ';
    display: block;
    background-color: $report-line-color;
    width: calc(100% - 86px);
    height: 0.8px;
    position: absolute;
    top: -4px;
    left: 39px;
  }
  > .bottom-line{
    content: ' ';
    display: block;
    background-color: $report-line-color;
    width: calc(100% - 86px);
    height: 0.8px;
    position: absolute;
    bottom: -5px;
    left: 45px;
  }
  > .horn-right-top{
    transform: rotate(0deg);
    position: absolute;
    top: -5px;
    right: 7px;
  }
  .border-main-box-content{
    padding: 15px 40px;
    height:100px;

    .topReport{
      display: flex;
      justify-content: space-between;
      .title-app{
        img{
          position: relative;
          top: 3px;
          margin-right: 10px;
        }
      }
      .update-time{
        color: rgba(255, 255, 255, 0.5);
        font-size: 14px;
        position: relative;
        top: 3px;
      }
    }
  }
}
</style>
